<template>
  <div class="table-box">
    <ProTable :columns="columns" :requestApi="getList" ref="proRef">
      <template #tableHeader="scope">
        <el-button type="primary" @click="makeEdit(undefined)">新增文章</el-button>
        <el-button type="danger" @click="deleteApi(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
        <!-- <el-button @click="goCategory">分类列表</el-button> -->
      </template>
      <template #cover="{ row }">
        <el-image :src="row.cover" class="w-1/1 h-100px align-bottom" fit="scale-down"></el-image>
      </template>
      <template #create_time="{ row }">
        {{ dayjs(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #update_time="{ row }">
        {{ dayjs(row.update_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #opera="{ row }">
        <el-button link type="primary" :icon="EditPen" @click="makeEdit(row.id)">编辑</el-button>
        <el-button link type="primary" :icon="Delete" @click="deleteApi([row.id])">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useRouter } from "vue-router";
import { getList, getGroups, deleteArt } from "@/api/modules/article";
import { Delete, EditPen } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { useHandleData } from "@/hooks/useHandleData";
import { ref } from "vue";

const proRef = ref<InstanceType<typeof ProTable> | null>();

const deleteApi = async (ids: any) => {
  await useHandleData(deleteArt, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};

const router = useRouter();

const columns: ColumnProps[] = [
  { type: "selection", width: 50 },
  { prop: "id", label: "id", width: 80 },
  { prop: "title", label: "文章标题", search: { el: "input" } },
  { prop: "author", label: "作者", search: { el: "input" } },
  { prop: "cover", label: "封面", width: 150 },
  { prop: "group", label: "分类", search: { el: "select" }, enum: getGroups, fieldNames: { label: "name", value: "id" } },
  { prop: "create_time", label: "创建时间", search: { el: "date-picker", props: { type: "daterange" } } },
  { prop: "update_time", label: "更新时间" },
  { prop: "opera", label: "操作", width: 200 }
];

const makeEdit = (id?: number) => {
  const data = router.resolve({ name: "articleNew", query: { id } });
  window.open(data.fullPath);
};
</script>

<style></style>
